<template>
    <el-container>
            <el-header>
            <a class="h3" href="javascript:;">UNI-ADMIN</a>
            <el-menu :default-active="0" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item :index="index" v-for="(item, index) in this.$store.state.user.tree" :key="index" @click="headerList(item)" default-active="0">
                    {{ item.name }}
                </el-menu-item>
                <el-submenu :index="this.$store.state.user.tree.length">
                    <el-menu-item index="2-1">修改</el-menu-item>
                    <el-menu-item index="2-2" @click="toLogin">退出</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        
        <el-container >
            <el-aside width="200px">
                <el-row class="tac" style="height:100%">
                    <el-col :span="24">
                        <el-menu class="el-menu-vertical-demo" :default-active="0">
                            <el-menu-item :index="index" v-for="item,index in this.asideList" @click="getasideList(item.desc)" >
                                <i :class="item.icon"></i>
                                <span slot="title">{{item.name}}</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>


<script>
export default {
    data() {
        return {
            activeIndex: '1',
            asideList:[],
            url:'',
            tabIndex:0
        };
    },
    methods: {
        headerList(res){
            this.asideList = res.child
            this.url = res.desc.replaceAll('_','/')
            console.log(this.url);
            this.$router.push(`/${this.url}`)
        },
        getasideList(res){
            this.url = res.replaceAll('_','/')
            console.log(this.url);
            this.$router.push(`/${this.url}`)
        },
        toLogin(){
            this.$store.commit('setToken','')
            this.$store.commit('setTree',[])
            this.$router.push('/login')
        }
    },
    mounted() {
        this.asideList = this.$store.state.user.tree[0].child
    },

}
</script>

<style scoped>
.h3 {
    font-weight: 500;
    line-height: 1.2;
    font-size: 1.25em;
    color: #f8f9fa;
}
.el-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(84, 92, 100);
}

.header-list {
    color: rgb(255, 255, 255);
    border-bottom-color: transparent;
}

.el-col {
    color: rgb(255, 255, 255);
    border-bottom-color: transparent;
    border-bottom: 2px solid transparent;
    font-size: 14px;
}
</style>